<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 筛选组件 -->
      <social-tool />
      <el-card class="hr-block">
        <el-table
          :data="list"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="username" label="姓名" width="100" sortable />
          <el-table-column prop="mobile" label="手机" width="120" sortable />
          <el-table-column prop="workNumber" label="工号" sortable />
          <el-table-column
            prop="departmentName"
            label="部门"
            sortable
            width="130"
          />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable />
          <el-table-column prop="leaveTime" label="离职时间" sortable />
          <el-table-column
            prop="participatingInTheCity"
            label="社保城市"
            width="100"
          />
          <el-table-column
            prop="providentFundCity"
            label="公积金城市"
            width="100"
          />
          <el-table-column prop="socialSecurityBase" label="社保基数" />
          <!-- MARK 虚拟数据赋值:formatter="getBase"  -->
          <el-table-column prop="providentFundBase" label="公积金基数" />
          <!-- <el-table-column label="操作">
            <template v-slot:default="obj">
              <el-button type="text" size="mini" @click="$router.push(`/social_securitys/detail/${obj.row.id}`)">查看详情</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pageSize"
            layout="prev, pager, next"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getSettings, getCityList, getSocialList } from '@/api/social'
// import { getEmployeeList } from '@/api/salary'
import SocialTool from './components/social-tool'
import pageTools from '../approval/components/page-tools.vue'

export default {
  name: 'SocialTableIndex',
  components: { SocialTool, pageTools },
  data () {
    return {
      cityList: [],
      list: [],
      // yearMonth: '',
      page: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      selectParams: {},
      tips: {},
      loading: false
    }
  },
  created () {
    // 获取社保列表
    this.getSocialList() // 获取列表数据
    // this.getSettings()
    this.getCity()
  },
  methods: {
    getBase () {
      return [3000, 5000, 6000, 8000, 10000, 12000, 15000, 16000][Math.floor(Math.random() * 8)]
    },
    async getCity () {
      const data = await getCityList()

      // console.log("cityList >>> ",data)
      this.cityList = data
    },
    // async getSettings () {
    //   const { dataMonth } = await getSettings()
    //   this.yearMonth = dataMonth
    // },
    // 进入详情页
    goDetail (row, event, column) {
      this.$router.push({ path: 'detail' })
    },
    // MARK 多参数查询
    async getSocialList () {
      try {
        console.log("selectParams >>> ", this.selectParams)
        const { rows, total } = await getSocialList({ ...this.page, ...this.selectParams })
        // this.list = rows // 列表数据
        // MARK 处理leaveTime空数据
        this.list = rows.map(row => ({
          ...row,
          leaveTime: row.leaveTime ? row.leaveTime : '--'
        }))
        this.page.total = total // 总数
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // MARK 查询参数获取
    changeSelectParams (selectParams) {
      this.selectParams.departmentChecks = selectParams.departmentChecks
      this.selectParams.providentFundChecks = selectParams.providentFundChecks
      this.selectParams.socialSecurityChecks = selectParams.socialSecurityChecks
      this.page.page = 1
      this.getSocialList()
    },
    pageChange (page) {
      this.page.page = page // 当前
      this.getSocialList() // 获取列表数据
    },
    // 导出
    // handleExport () {
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cont-bod-box {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid #ebeef5;
}
</style>
